extends ./layouts/default

block title
    title Koa Douban 首页
    style.
        header {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background: #00474f;
            color: #E7DACB;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            z-index: 500;
        }

        @media (min-width: 768px) {
            .sidebar {
                position: -webkit-sticky;
                position: sticky;
                top: 4rem;
                z-index: 1000;
                height: calc(100vh - 4rem);
                border-right: 1px solid rgba(0,0,0,.1);
                order: 0;
                border-bottom: 1px solid rgba(0,0,0,.1);
            }

            .cat-links {
                display: block!important;
                max-height: calc(100vh - 9rem);
                overflow-y: auto;
                padding-top: 1rem;
                padding-bottom: 1rem;
                margin-right: -15px;
                margin-left: -15px;
            }
        }

        .sidebar-link {
            display: block;
            padding: .25rem 1.5rem;
            font-weight: 500;
            color: rgba(0,0,0,.65);
        }

        .sidebar .nav > li > a {
            display: block;
            padding: .25rem 1.5rem;
            font-size: 90%;
            color: rgba(0,0,0,.65);
        }

        .sidebar-item.active > .sidebar-inner {
            display: block;
        }
        .card {
            margin-bottom: 1.5rem;
        }
        .switcher {
            position: relative;
            padding: 1rem 15px;
            margin-right: -15px;
            margin-left: -15px;
            border-bottom: 1px solid rgba(0,0,0,.05);
        }
        .sidebar-toggle {
            line-height: 1;
            color: #212529;
        }
        .p-0 {
            padding: 0!important;
        }
        .ml-3, .mx-3 {
            margin-left: 1rem!important;
        }
        .btn-link {
            font-weight: 400;
            color: #007bff;
            background-color: transparent;
        }

block content
    include ./includes/header

    .container-fluid
        .row
            .col-12.col-md-3.col-xl-2.sidebar
                .collapse.cat-links
                    .sidebar-item.active
                        a.sidebar-link(href='/') Links
                        ul.nav.sidebar-inner
                            li.active.sidebar-inner-active
                                a(href='/') Link1
                            li.sidebar-inner-active
                                a(href='/') Link2
            .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
                .row
                    .col-md-6
                        .card
                            img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4')
                            .card-body
                                h4.card-title 这是电影标题
                                p.card-desc 这是电影描述
                            .card-footer
                                small.text-muted 1 天前更新
                    .col-md-6
                        .card
                            img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4')
                            .card-body
                                h4.card-title 这是电影标题
                                p.card-desc 这是电影描述
                            .card-footer
                                small.text-muted 1 天前更新
                .row
                    .col-md-6
                        .card
                            img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4')
                            .card-body
                                h4.card-title 这是电影标题
                                p.card-desc 这是电影描述
                            .card-footer
                                small.text-muted 1 天前更新
                    .col-md-6
                        .card
                            img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4')
                            .card-body
                                h4.card-title 这是电影标题
                                p.card-desc 这是电影描述
                            .card-footer
                                small.text-muted 1 天前更新

    #myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")
        .modal-dialog.modal-lg
            #videoModal.modal-content

    include ./includes/script

    script.
        var player = null

        $(document).ready(function () {
            $('#myModal').on('hidden.bs.modal', function (e) {
                if (player && player.pause) player.pause()
            })

            $('.card-img-top').click(function (e) {
                var video = $(this).data('video')
                var image = $(this).attr('src')

                $('#myModal').modal('show')

                if (!player) {
                    player = new DPlayer({
                        container: document.getElementById('videoModal'),
                        screenshot: true,
                        video: {
                            url: video,
                            pic: image,
                            thumbnails: image
                        }
                    })
                } else {
                    if (play.video.currentSrc !== video) {
                        player.switchVideo({
                            url: video,
                            pic: image,
                            type: 'auto'
                        })
                    }
                }
            })
        })